/*
 * 可复用的公有布局
 */

/* 定位 */
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.fix {
  position: fixed;
}
/* flex布局 */
.flex-j-se {
  display: flex;
  justify-content: space-evenly;
}
/* 版心 */
/* 文本位置*/
.text-a-right {
  text-align: right;
}
.text-a-center {
  text-align: center;
}
.text-a-left {
  text-align: left;
}
/* 怪异盒子 */
.box-bor {
  box-sizing: border-box;
}
/* 字体颜色 */
.fc-write {
  color: #fff;
}
.fc-gray {
  color: #c9c5c5;
}
.fc-blue {
  color: #4294ff;
}
/* 背景颜色 */
.bg-blue {
  background-color: #4294ff;
}
.bg-gray {
  background-color: #c9c5c5;
}
/*
    1.html结构尽量不要超过5层
    2.html标签多使用公共类样式，样式的组件化
        例：<div class="container fr bg-red"></div>
    3.规定好项目的层级规范
        popout弹出层 90~99
        mask蒙层 70~79
        nav导航层 40~50
        content内容层 0~10
*/
/* 版心 */

/* 定位布局 */
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.fix {
  position: fixed;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.t-r {
  text-align: right;
}
.t-c {
  text-align: center;
}
.clear::after {
  display: block;
  content: "";
  height: 0;
  clear: both;
}
/* flex布局 */
.flex-c-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-c-b {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.flex-d {
  flex-direction: column;
}
.flex-c-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-c-se {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.flex-c-s {
  display: flex;
  justify-content: space-evenly;
  align-content: space-between;
}
.c-p {
  cursor: pointer;
}
.b-box {
  box-sizing: border-box;
}
.d-ib {
  display: inline-block;
}
.c-fff {
  color: #fff;
}
.c-7e {
  color: #7e7880;
}
/* 定位 */
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.fix {
  position: fixed;
}
/* flex布局 */
.flex-j-se {
  display: flex;
  justify-content: space-evenly;
}
/* 版心 */
/* 文本位置*/
.text-a-right {
  text-align: right;
}
.text-a-center {
  text-align: center;
}
.text-a-left {
  text-align: left;
}
/* 怪异盒子 */
.box-bor {
  box-sizing: border-box;
}
/* 字体颜色 */
.fc-write {
  color: #fff;
}
.fc-gray {
  color: #c9c5c5;
}
.fc-blue {
  color: #4294ff;
}
/* 背景颜色 */
.bg-blue {
  background-color: #4294ff;
}
.bg-gray {
  background-color: #c9c5c5;

  color: #7e7880;
}
